<template>
  <div>
    <div>
      <header>
        <span class="title">票房</span>
        <div class="goto-detail" @click="fun()">
          <span>票房详情<i class="iconfont icon-xiangyou"></i></span>
        </div>
      </header>
      <div class="data-box">
        <div class="item-o">
          <div class="value-t">2</div>
          <div class="name-z">昨日排名</div>
        </div>
        <div class="item-o">
          <div class="value-t">24，022</div>
          <div class="name-z">首周票房（万）</div>
        </div>
        <div class="item-o">
          <div class="value-t">116，368</div>
          <div class="name-z">累计票房（万）</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    fun() {
      this.$router.push({ path: "/boxOffice" });
    },
  },
};
</script>
<style>
header {
  height: 0.86rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.3rem;
}
header .title {
  font-size: 0.3rem;
  color: #333;
}
header .goto-detail {
  font-size: 0.24rem;
  color: #999;
}
.goto-detail i {
  margin-left: 0.16rem;
  font-size: 0.24rem;
}
.data-box {
  background-color: #f8f8f8;
  border-radius: 0.12rem;
  margin: 0 0.3rem 0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}
.data-box .item-o {
  flex-grow: 1;
  text-align: center;
  padding: 0.24rem 0 0.22rem;
}
.data-box .item-o .value-t {
  font-size: 0.34rem;
  color: #f03d37;
}
.data-box .item-o .name-z {
  font-size: 0.24rem;
  color: #666;
  margin-top: 0.02rem;
}
</style>